<template>
  <div class="report-wrapper user-conversion">
    <div class="main-hd">
      <h2>{{ $t('m.tíépèizhì') }}</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <div class="search-con">
          <Select v-model="levelId" style="width:200px;" :placeholder="this.$t('m.yònghùděngjí')">
            <Option :value="''">{{ $t("m.entire") }}</Option>
            <Option v-for="item in userDataClass" :value="item.levelId">{{item.levelName}}</Option>
          </Select>

          <Select v-model="levelStatus" style="width:200px;    margin-left: 20px;" :placeholder="this.$t('m.status')">
            <Option :value="''">{{ $t("m.entire") }}</Option>
            <Option :value="'1'">{{ $t("m.jīhuó")  }}</Option>
            <Option :value="'0'">{{ $t("m.wèijīhuó")  }}</Option>
          </Select>

          <Button type="primary" @click="withdrawNew" style="float: right; margin: 4px;">
            <Icon type="md-add" /> {{ $t('m.xīnjiàn') }}
          </Button>
        </div>

        <div class="table-con">
          <h3 class="table-title"> {{ $t('m.tíépèizhìlièbiǎo') }}</h3>
          <Table border :columns="udColumns" :data="userDataList" :loading="udLoading" ref="table">

            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" style="margin-right: 5px" @click="withdrawEdit(row)">{{ $t('m.edit') }}</Button>
            </template>
          </Table>
          <Page :total="userDataListSize" :current.sync="userDataPages" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="userDataCurrentChange" @on-page-size-change="userDataSizeChange"></Page>
        </div>
      </div>
    </div>
    <div>
      <Modal v-model="withdrawModal" :title="this.$t('m.pèizhì')" :mask-closable="false" footer>
        <span slot="footer"></span>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120" style="margin:0px 70px 0px 30px">
          <FormItem :label="this.$t('m.yònghùděngjímíngchēng')" prop="levelName">
            <Input v-model="formValidate.levelName" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.yònghùděngjímíngchēng')"></Input>
          </FormItem>
          <FormItem :label="this.$t('m.miáoshù')" prop="levelRemark">
            <Input v-model="formValidate.levelRemark" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.miáoshù')"></Input>
          </FormItem>
          <FormItem :label="this.$t('m.status')" prop="levelStatus">
            <RadioGroup v-model="formValidate.levelStatus">
              <Radio :label=1>{{$t('m.jīhuó')}}</Radio>
              <Radio :label=0>{{$t('m.wèijīhuó')}}</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem :label="this.$t('m.shēngjíxūyàohuánqīngcìshù')" prop="levelRepaidTimes">
            <Input v-model="formValidate.levelRepaidTimes" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.shēngjíxūyàohuánqīngcìshù')"></Input>
          </FormItem>
          <FormItem :label="this.$t('m.jièkuǎnjīné')" prop="levelLoanAmount">

            <Select v-model="formValidate.levelLoanAmount" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎnjīné')">
              <Option v-for="item in  formValidateSelect.levelLoanAmount" :value="item">{{ item }}</Option>
            </Select>

            <!-- <Input v-model="formValidate.levelLoanAmount" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎnjīné')"></Input> -->
          </FormItem>
          <FormItem :label="this.$t('m.jièkuǎntiānshù')" prop="levelLoanDay">
            <Select v-model="formValidate.levelLoanDay" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎntiānshù')">
              <Option v-for="item in  formValidateSelect.levelLoanDay" :value="item">{{ item }}</Option>
            </Select>

            <!-- <Input v-model="formValidate.levelLoanDay" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.jièkuǎntiānshù')"></Input> -->
          </FormItem>
          <FormItem :label="this.$t('m.overdueDay')" prop="levelOverdueDays">
            <Input v-model="formValidate.levelOverdueDays" :placeholder="this.$t('m.qǐngshūrù')+this.$t('m.overdueDay')"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="withdrawOk('formValidate')">{{  $t('m.submit')}}</Button>
            <Button @click="withdrawCancel" style="margin-left: 8px"> {{  $t('m.cancel') }}</Button>
          </FormItem>
        </Form>

      </Modal>
    </div>
  </div>
</template>

<script>
import excel from '@/static/excel'
export default {
  data () {
    return {
      levelId: '',
      levelStatus: '',
      withdrawEditName: '',
      formValidate: {
        levelId: '',
        levelName: '',
        levelRemark: '',
        levelStatus: 1,
        levelLoanAmount: '',
        levelLoanDay: '',
        levelRepaidTimes: '',
        levelOverdueDays: '',
      },
      formValidateSelect: {},
      ruleValidate: {
        levelName: [
          { required: true, message: this.$t('m.qǐngshūrù') + this.$t('m.yònghùděngjímíngchēng'), trigger: 'blur' }
        ],
        levelRemark: [
          { required: true, message: this.$t('m.qǐngshūrù') + this.$t('m.miáoshù'), trigger: 'blur' }
        ],
        levelLoanAmount: [
          { required: true, type: 'string', message: this.$t('m.qǐngshūrù') + this.$t('m.shēngjíxūyàoxiāofèicìshù'), trigger: 'blur' }
        ],
        levelLoanDay: [
          { required: true, type: 'string', message: this.$t('m.qǐngshūrù') + this.$t('m.jièkuǎnjīné'), trigger: 'blur' }
        ],
        levelRepaidTimes: [
          { required: true, type: 'string', message: this.$t('m.qǐngshūrù') + this.$t('m.jièkuǎntiānshù'), trigger: 'blur' }
        ],
        levelOverdueDays: [
          { required: true, type: 'string', message: this.$t('m.qǐngshūrù') + this.$t('m.overdueDay'), trigger: 'blur' }
        ],
      },


      repaymentDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      userDataTimeDefault: [],
      userDataListSum: [{}],
      userDataListSize: 1,
      userDataTimeStart: '',
      userDataTimeEnd: '',
      userDataList: [], // user transfer list
      userDataClass: [],
      userDataPageNumber: 1,
      userDataPageSize: 10,
      userDataPages: 1,
      utLoading: true,
      udLoading: true,
      withdrawModal: false,

      udColumns: [{
        title: this.$t('m.děngjíbiānhào'),
        key: 'levelId',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.yònghùděngjímíngchēng'),
        key: 'levelName',
        "align": 'center'
      },
      {
        title: this.$t('m.miáoshù'),
        key: 'levelRemark',
        "align": 'center'
      },
      {
        title: this.$t('m.status'),
        key: 'levelStatus',
        "align": 'center',
        render: (h, params) => {
          return h('span', params.row.levelStatus == 1 ? this.$t('m.jīhuó') : this.$t('m.wèijīhuó'))
        }
      },
      {
        title: this.$t('m.shēngjíxūyàohuánqīngcìshù'),
        key: 'levelRepaidTimes',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.jièkuǎnjīné'),
        key: 'levelLoanAmount',
        sortable: 'true',
        "align": 'center',
      },
      {
        title: this.$t('m.jièkuǎntiānshù'),
        key: 'levelLoanDay',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.overdueDay'),
        key: 'levelOverdueDays',
        sortable: 'true',
        "align": 'center'
      },
      {
        title: this.$t('m.operate'),
        slot: 'action',
        "align": 'center'
      }

      ],
    }
  },
  created () {
    this.userDataQuery(true)
    this.getConfigList()
  },
  watch: {
    levelId () {
      this.userDataQuery()
    },
    levelStatus () {
      this.userDataQuery()
    }
  },
  methods: {
    // 获取用户详情
    userDataQuery (v = false) {
      let param = {},
        query = '';
      param.levelId = this.levelId,

        param.pageSize = this.userDataPageSize
      param.pageNumber = this.userDataPageNumber
      // param.levelName = '',
      param.levelStatus = this.levelStatus,
        Object.keys(param).forEach((item, index) => {
          if (param[item]) {
            query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
          }
        });
      var url = `/api/laocai/userLevel/list?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          if (v) {
            let Class = []
            for (const key in res.body.result.list) {
              Class.push({
                levelId: res.body.result.list[key].levelId,
                levelName: res.body.result.list[key].levelName
              })
            }
            this.userDataClass = [...new Set(Class)]
          }
          this.userDataList = res.body.result.list
          this.userDataListSize = res.body.result.size
          setTimeout(() => {
            this.utLoading = false
            this.udLoading = false
          }, 500);
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },

    // 页码改变的回调，返回改变后的页码
    userDataCurrentChange (val) {
      this.udLoading = true;
      this.userDataPageNumber = val;
      this.userDataQuery();
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    userDataSizeChange (val) {
      this.udLoading = true;
      this.userDataPageSize = val;
      this.userDataQuery();
    },

    withdrawOk () {

      if (this.withdrawEditName == this.formValidate.levelName) {
        this.withdrawOkGo()
      } else {
        this.$http.get('/api/laocai/userLevel/check/levelName?levelName=' + this.formValidate.levelName).then((res) => {
          if (res.body.code == 0) {
            if (res.body.result) {
              this.withdrawOkGo()
            } else {
              this.$Message.success(this.$t('m.yònghùděngjímíngchēng') + this.$t('m.bùnéngchóngfù'));
            }
          } else {
            this.$Message.success(this.$t('m.errorCode' + res.body.code));
          }
        })
      }




    },

    withdrawOkGo () {
      this.formValidate.levelLoanAmount = this.formValidate.levelLoanAmount.toString(),
        this.formValidate.levelLoanDay = this.formValidate.levelLoanDay.toString(),
        this.$refs['formValidate'].validate((valid) => {
          if (valid) {
            this.$http.post('/api/laocai/userLevel/info', {
              levelId: this.formValidate.levelId,
              levelName: this.formValidate.levelName,
              levelRemark: this.formValidate.levelRemark,
              levelStatus: this.formValidate.levelStatus,
              levelLoanAmount: this.formValidate.levelLoanAmount,
              levelLoanDay: this.formValidate.levelLoanDay,
              levelRepaidTimes: this.formValidate.levelRepaidTimes,
              levelOverdueDays: this.formValidate.levelOverdueDays,
            }).then((res) => {
              if (res.body.code == 0) {
                this.withdrawModal = false
                this.userDataQuery()
                this.$Message.success(this.$t('m.errorCode' + res.body.code));
              } else {
                this.$Message.error(this.$t('m.errorCode' + res.body.code));
              }
              this.withdrawEditName = ''
              this.this.formValidate.levelId = ''
            })
          } else {
          }
        })

    },

    getConfigList () {
      this.configLoading = true;
      this.$http.get('/api/laocai/sys/config/list')
        .then((res) => {
          res.body.result
          for (const key in res.body.result) {
            if (res.body.result[key].name == 'loanAmountArray') {
              this.formValidateSelect.levelLoanAmount = eval("(" + res.body.result[key].value + ")")
            }
            if (res.body.result[key].name == 'loanDaysArray') {
              this.formValidateSelect.levelLoanDay = eval("(" + res.body.result[key].value + ")")
            }
          }
        }, er => {
          console.log(error);
        });
    },






    withdrawCancel () {

      this.withdrawModal = false
      this.formValidate = {
        levelName: '',
        levelRemark: '',
        levelStatus: 1,
        levelLoanAmount: '',
        levelLoanDay: '',
        levelRepaidTimes: '',
        levelOverdueDays: '',
      }

    },
    withdrawEdit (v) {
      this.withdrawEditName = v.levelName
      this.formValidate.levelId = v.levelId
      this.formValidate.levelName = v.levelName
      this.formValidate.levelRemark = v.levelRemark
      this.formValidate.levelLoanAmount = v.levelLoanAmount
      this.formValidate.levelLoanDay = v.levelLoanDay
      this.formValidate.levelRepaidTimes = v.levelRepaidTimes.toString()
      this.formValidate.levelOverdueDays = v.levelOverdueDays.toString()
      this.formValidate.levelStatus = v.levelStatus
      this.withdrawModal = true
      console.log(this.formValidate, "后数据")
    },

    // 导出用户数据汇总Excel
    withdrawNew () {
      this.formValidate = {
        levelName: '',
        levelRemark: '',
        levelStatus: 1,
        levelLoanAmount: '',
        levelLoanDay: '',
        levelRepaidTimes: '',
        levelOverdueDays: '',
      },

        this.withdrawModal = true
    }
  }
}
</script>

<style lang="scss" scoped>
.report-wrapper {
  .ivu-table td {
    &.mouse-hover {
      .ivu-poptip-rel {
        span {
          font-weight: bold;
          text-decoration: underline;
        }
      }
    }
    &.mouse-hover:hover {
      background: #ebf7ff;
      .ivu-poptip-rel {
        cursor: pointer;
      }
    }
  }

  .search-con {
    .search-col {
      margin-left: 10px;
    }

    .search-col,
    .search-input {
      display: inline-block;
      width: 200px;
    }
  }

  .table-con {
    margin-top: 44px;

    .table-title {
      margin-bottom: 18px;
    }

    .expand-more {
      line-height: 24px;
      border-left: 1px solid #e8eaec;
      border-right: 1px solid #e8eaec;
      border-bottom: 1px solid #e8eaec;
      font-size: 12px;
      // background: #f8f8f9;
      text-align: center;
      cursor: pointer;
    }
  }

  .ivu-page {
    margin-top: 12px;
    text-align: right;
  }

  .loan-table {
  }
}
</style>